<template>
    <div class="app-container">
        <el-row :gutter="20" >
            <el-col :span="4" :xs="24" id="l_tree" :style="'height:'+ht+'px;'" >
                <el-tree v-loading="loadtreeing" :data="xzqhOptions" node-key="orgCd" :props="defaultProps" @node-click="handleNodeClick" default-expand-all ></el-tree>
            </el-col>
            <el-col :span="20" :xs="24" style="padding-left:15px; " >
                <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
                    <!-- <el-form-item label="选择水管机构">
                        <el-select v-model="queryParams.orgCd" size="small" @change="selectGet" placeholder="请选择水管机构" >
                            <el-option v-for= "item in orgList" :key="item.orgCd" :label="item.orgNm" :value="item.orgCd">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item>
                        <el-date-picker
                            v-model="queryParams.queryTime"
                            class="timePicker"
                            type="month"
                            size="small"
                            placeholder="选择年月"
                            format="yyyy-MM"
                            value-format="yyyy-MM"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-form>

                <!-- <div class="tb_title" :v-html="tableTitle" >富蕴县2023年各监测站的数据完整率统计表</div> -->
                <div class="tb_title"  >{{tableTitle}}</div>

                <el-table stripe v-loading="loading" :data="wmList" >
                    <el-table-column label="水管机构代码" prop="orgCd" width="200" />
                    <el-table-column label="水管机构名称" prop="orgNm" width="130" />
                    <el-table-column label="应报次数" prop="ybCount" width="120" />
                    <el-table-column label="实报次数" prop="sbCount" width="120" />
                    <el-table-column label="完整率" min-width="200" >
                        <template slot-scope="scope">
                            <el-progress style="line-height:24px" :percentage="(scope.row.integrityRate) >= 100 ? 100 : scope.row.integrityRate"></el-progress>
                        </template>
                    </el-table-column>
                    <el-table-column label="完整率详情" align="center"   width="100">
                        <template slot-scope="scope">
                            <img @click="opendio(scope.row)" style=" cursor : pointer; margin-top: 6px; " src="../../../assets/icons/sjjgicon.png" >
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />

            </el-col>
        </el-row>
        
        <!-- 完整率详情 -->
        <el-dialog title="完整率详情" :visible.sync="open" width="700px" >
            <el-tabs v-model="activeName" >
                <el-tab-pane label="年逐月情况" name="nzy">
                    <el-date-picker
                        v-model="yearMonths"
                        class="timePicker"
                        type="year"
                        placeholder="选择年"
                        format="yyyy"
                        value-format="yyyy-MM"
                        @change="chooseYear"
                    ></el-date-picker>
                    <div id="nzy_echars" ></div>
                </el-tab-pane>
                <el-tab-pane label="月逐日情况" name="yzr">
                    <el-date-picker
                        v-model="monthDays"
                        class="timePicker"
                        type="month"
                        placeholder="选择年月"
                        format="yyyy-MM"
                        value-format="yyyy-MM"
                        @change="chooseMonth"
                    ></el-date-picker>
                    <div id="yzr_echars" ></div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>

    </div>
</template>

<script>
import { listStationDataWzl ,listStationDataWzlGroupYM,listStationDataWzlGroupMD} from "@/api/waterManagement/DataQuality";
import * as echarts from 'echarts';
// import { listWiOrganB } from "@/api/datam/WiOrganB";
import { organtreeList } from "@/api/common"

export default {
    name: "dataIntegrityRate",

    data() {
        return {
            activeName: 'nzy',
            open: false,
            // 行政区划树选项
            xzqhOptions: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            orgList: [],
            // 岗位表格数据
            wmList: [],
            // 列表标题行内容
            tableTitle: "富蕴县水利局2023年3月完整率统计表",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                orgCd: '',
                eqType:undefined,
                queryTime: null,
                orgNm: undefined
            },
            yearMonths:'',
            monthDays:'',
            stCode:'',
            defaultProps: {
                children: 'children',
                label: 'orgNm'
            },
            ht: 400,
            loadtreeing: true,
            orgNm:''
        };
    },
    created() {
        var htd = document.body.clientHeight*0.85;
        this.ht = htd;
        this.getTreeselect();
        // this.getTableYearMonth();
        // this.getOrgName();
    },
    mounted () {
    },
    methods: {
        handleNodeClick(data) {
            if (data) {
                this.queryParams.orgCd = data.orgCd;
                //this.getTableYearMonth();
                this.orgNm = data.orgNm;
                this.handleQuery();
            }
        },
        // getOrgName(){
        //     //this.loading = true;
        //     listWiOrganB(this.queryParams).then((response) => {
        //     let rp = response.rows;
        //     this.orgList = rp;
        //     this.queryParams.orgName = rp[0].orgCd;
        //     this.selectGet(rp[0].orgCd);
        //     this.getList();
        //     //this.loading = false;
        //     });
        // },
        /** 查询行政区域下拉树结构 */
        getTreeselect() {
            this.loadtreeing = true;
            organtreeList().then(response => {
                this.xzqhOptions = this.handleTree(response.data,"orgCd","parentOrgCd");
                let sgdata = this.xzqhOptions;
                this.queryParams.orgCd = sgdata[0].orgCd;
                this.orgNm = sgdata[0].orgNm;
                this.getList();
                this.loadtreeing = false;
            });
        },
        //下拉框选中事件
        selectGet(vId){//这个vId也就是value值
            let obj = {};
            obj = this.orgList.find((item)=>{//这里的userList就是上面遍历的数据源
            return item.orgCd === vId;//筛选出匹配数据
            });
            this.orgNm =obj.orgNm;
        },
        getTableYearMonth(){
            var day = new Date();
            var nowYear = day.getFullYear();
            var nowMonth = day.getMonth() + 1;
            this.tableTitle = this.orgNm + nowYear + "年" + nowMonth + "月完整率统计表";
        },
        //选择年份
        chooseYear(){
            var nowYear = this.yearMonths.substring(0,4);
            this.loyear(this.orgCd,nowYear);
        },
        //选择月
        chooseMonth(){
            this.lomonth(this.orgCd,this.monthDays );
        },
        //详情
        opendio(row){
            this.orgCd = row.orgCd;
            this.loyear(this.orgCd,this.yearMonths);
            this.lomonth(this.orgCd,this.monthDays );
        },
        //选择年(默认当年)
        loyear(et,yearDate){
            this.open = true;
            var s = this;
            var date;
            if (yearDate == undefined || yearDate==''){
                var day = new Date();
                var nowYear = day.getFullYear();
                yearDate=nowYear;
            }else {
                date =this.yearMonths;
                yearDate=yearDate.substring(0,4);
            }
            let station = {
                orgCd :et,
                queryTime : date,
            };
            this.$nextTick(function(){
              listStationDataWzlGroupYM(station).then(response => {
                    const pd = response.data;
                    let integrityRates = pd;
                    const date = [];
                    const yearToMonth = [];
                    let sy = {
                        'yb':undefined,
                        'sb':undefined,
                        'value':undefined
                    };
                    for (let i = 0; i < integrityRates.length; i++) {
                        date.push(integrityRates[i].ymTime);
                        sy = {
                            'yb':integrityRates[i].ybCount,
                            'sb':integrityRates[i].sbCount,
                            'value':integrityRates[i].integrityRate
                        };
                        yearToMonth.push(sy)
                    }
                    this.loadnzy(date,yearToMonth,yearDate);
                })
            })
        },
        //选择月(默认当月)
        lomonth(et,monthDate) {
            this.open = true;
            var s = this;
            var date;
            if (monthDate == undefined || monthDate=='') {
                this.orgCd = et,
                    date = this.queryParams.queryTime;
                var day = new Date();
                var nowYear = day.getFullYear();
                var nowMonth = day.getMonth() + 1;
                monthDate = nowYear + '-' + nowMonth;
            } else {
                date = this.monthDays;
            }
            let station = {
                orgCd: this.orgCd,
                queryTime: date,
            };
            this.$nextTick(function () {
              listStationDataWzlGroupMD(station).then(response => {
                    const pdMonth = response.data;
                    let integrityRateMonth = pdMonth;
                    const date = [];
                    const monthToDay = [];
                    let sy = {
                        'yb':undefined,
                        'sb':undefined,
                        'value':undefined
                    };
                    for (let i = 0; i < integrityRateMonth.length; i++) {
                        date.push(integrityRateMonth[i].mdTime);
                        sy = {
                            'yb':integrityRateMonth[i].ybCount,
                            'sb':integrityRateMonth[i].sbCount,
                            'value':integrityRateMonth[i].integrityRate
                        };
                        monthToDay.push(sy)
                    }
                    this.loadyzr(date,monthToDay,monthDate);
                })
            })
        },
        loadnzy(date,yearToMonth,yearDate){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('nzy_echars'));
            // 绘制图表
            myChart.setOption({
                color:['#51B1FF'],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    top: '20%',
                    containLabel: true
                },
                title: {
                    text: yearDate+'年逐月完整率统计',
                    left: 'center',
                    textStyle:{
                        //文字颜色
                        color:'#1699F3',
                        fontStyle:'normal',
                        fontWeight:'bold',
                        //字体系列
                        fontFamily:'sans-serif'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter(params){
                        let fParams = params[0];

                        return fParams.name + '月 <br> '+ fParams.seriesName +' : '+fParams.value + '% <br>'
                            + ' 应报 : '+fParams.data.yb + ' <br>'
                            + ' 实报 : ' + fParams.data.sb + ' ';
                    }
                },
                xAxis: {
                    type: 'category',
                    data: date,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#9e9e9e'
                        }
                    },
                },
                yAxis : [ {
                        splitLine:{show:false},
                        name: '(%)',
                        type: 'value',
                    }
                ],
                series: [
                    {
                        name: '完整率',
                        type: 'line',
                        symbol:"none", // 是否显示节点
                        data:
                        yearToMonth
                                ,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#80c2e1'
                                },
                                {
                                    offset: 1,
                                    color: '#e3eff5'
                                }
                            ])
                        },
                    },
                ]
            });
        },
        loadyzr(date,monthToDay,monthDate){

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('yzr_echars'));
            // 绘制图表
            myChart.setOption({
                color:['#51B1FF'],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    top: '20%',
                    containLabel: true
                },
                title: {
                    text: monthDate+'月逐日完整率统计',
                    left: 'center',
                    textStyle:{
                        //文字颜色
                        color:'#1699F3',
                        fontStyle:'normal',
                        fontWeight:'bold',
                        //字体系列
                        fontFamily:'sans-serif'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter(params){
                        let fParams = params[0];

                        return fParams.name + '日 <br> '+ fParams.seriesName +' : '+fParams.value + '% <br>'
                            + ' 应报 : '+fParams.data.yb + ' <br>'
                            + ' 实报 : ' + fParams.data.sb + ' ';
                    }
                },
                xAxis: {
                    type: 'category',
                    data: date,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#9e9e9e'
                        }
                    },
                },
                yAxis : [ {
                        splitLine:{show:false},
                        name: '(%)',
                        type: 'value',
                    }
                ],
                series: [
                    {
                        name: '完整率',
                        type: 'line',
                        symbol:"none", // 是否显示节点
                        data: monthToDay
                        ,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#80c2e1'
                                },
                                {
                                    offset: 1,
                                    color: '#e3eff5'
                                }
                            ])
                        },
                    },
                ]
            });
        },
        sqjcinfo(irow){
            const orgCd = irow.orgCd;
            this.$router.push({ path: "/realtimejc/statistic/sub_qdsq", query:{orgCd:orgCd}});
        },
        dealWithTime(data) {
            let Y = data.getFullYear();
            let M = data.getMonth() + 1;
            return Y + "年" + M + "月";
        },
        /** 查询测站列表 */
        getList() {
            this.loading = true;
            listStationDataWzl(this.queryParams).then(response => {
                this.wmList = response.rows;
                this.total = response.total;
                this.loading = false;
                
                if ( this.queryParams.queryTime == null){
                    var day = new Date();
                    var nowYear = day.getFullYear();
                    var nowMonth = day.getMonth() + 1;
                    this.tableTitle ="富蕴县" + nowYear + "年" + nowMonth + "月完整率统计表";
                }
                if(this.queryParams.orgCd != null && this.queryParams.queryTime == null){
                    var day = new Date();
                    var nowYear = day.getFullYear();
                    var nowMonth = day.getMonth() + 1;
                    this.tableTitle =this.orgNm + nowYear.toString() + "年" + nowMonth + "月完整率统计表";
                }
                if(this.queryParams.orgCd != null && this.queryParams.queryTime != null){
                    var nddate = new Date(this.queryParams.queryTime);
                    var nowYear = this.dealWithTime(nddate);
                    this.tableTitle =this.orgNm + nowYear + "完整率统计表";
                }
                // if(this.queryParams.orgCd == null && this.queryParams.queryTime != null){
                //     var tableYearMonth = this.queryParams.queryTime;
                //     var nowYear = this.queryParams.queryTime.substring(0,4);
                //     var nowMonth = this.queryParams.queryTime.substring(5,7);
                //     this.tableTitle ="富蕴县测站" + nowYear + "年" + nowMonth + "月完整率统计表";
                // }
            });
        },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.orgCd,
                label: node.orgNm,
                children: node.children
            };
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.postId)
            this.single = selection.length!=1
            this.multiple = !selection.length
        },

    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    #nzy_echars{
        width: 650px;
        height: 400px;
        margin: 10px auto;
    }

    #yzr_echars{
        width: 650px;
        height: 400px;
        margin: 10px auto;
    }

    .el-dialog__body {
        padding-top: 10px
    }

    .el-form-item--medium .el-form-item__content {
        line-height: 30px;
    }

    .tb_title{
        width: 430px;
        text-align: center;
        margin: 5px auto;
        margin-bottom: 15px;
        font-weight: 700;
    }

    #l_tree{
        padding-right:15px; 
        border-right: 1px solid #e5e5e5;
        min-height: 600px;
        overflow-x: auto;
    }

    #l_tree::-webkit-scrollbar{
        width: 0px; /*对垂直流动条有效*/
    }

</style>
